<template>
  <div id="content">
    <div style="float: left; color: #42b983; font-size: 16px; font-weight: 500">
      生命周期
    </div>
    <div>{{ message }}</div>
    <div>
      <a-button type="primary" @click="changeMessage"> 更新数据</a-button>
    </div>
    <div>
      <img src="../../../../public/lifecycle.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "没更新",
    };
  },
  methods: {
    changeMessage() {
      this.message = "更新了" + new Date();
    },
  },

  beforeCreate() {
    alert("beforeCreate");
  },
  created() {
    alert("created");
  },
  beforeMount() {
    alert("beforeMount");
  },
  mounted() {
    alert("mounted");
  },
  beforeUpdate() {
    alert("beforeUpdate");
  },
  updated() {
    alert("updated");
  },
  beforeUnmount() {
    alert("beforeUnmount");
  },
  unmounted() {
    alert("unmounted");
  },
  errorCaptured() {
    alert("errorCaptured");
  },
  renderTracked() {
    alert("renderTracked");
  },
  renderTriggered() {
    alert("renderTriggered");
  },
  activated() {
    alert("activated");
  },
  deactivated() {
    alert("deactivated");
  },
  serverPrefetch() {
    alert("serverPrefetch");
  },
};
</script>

<style>
img {
  width: 100%;
}
</style>
